.dropdown
  position: relative

  button
    font-size: 1rem
    background: none
    border: none
    color: $color-fg
    cursor: pointer

.dropdown-backdrop
  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0
  z-index: $z-index-backdrop

.dropdown-list
  visibility: hidden
  opacity: 0
  position: absolute
  right: 0
  list-style-type: none
  padding: 0
  margin: 0
  box-shadow: 0 0 3px rgba(black, 0.1)
  user-select: none
  z-index: $z-index-dropdown

  bottom: 100%

  &.dropdown-list-fixed
    position: fixed
    bottom: auto
    right: auto

  li
    display: block
    background-color: white
    color: black
    padding: 0.5rem
    cursor: pointer
    white-space: nowrap

    max-width: 250px
    overflow: hidden
    text-overflow: ellipsis

    &:hover
      background-color: #e6e6e6

    &:first-child
      border-radius: 5px 5px 0 0

    &:last-child
      border-radius: 0 0 5px 5px

    & + li
      border-top: 1px solid #e6e6e6

    ul.horizontal
      padding: 0
      margin: -0.5rem
      display: flex
      flex-direction: row

      & > li
        text-align: center
        flex-grow: 1
        border: none
        border-right: 1px solid #e6e6e6

        &.selected
          color: white
          background-color: $color-blue

        &:first-child
          border-radius: 5px 0 0 0

        &:last-child
          border-right: none
          border-radius: 0 5px 0 0

  &.dropdown-list-open
    visibility: visible
    opacity: 1

.dropdown-list.dropdown-center
  right: inherit
  left: 50%
  transform: translateX(-50%)
